<template>
    <div id="charts">
        <div class="title">用户分布图</div>
        <div id="main"  :style="{width:'400px',height:'400px',float:'left'}"></div>
        <div id="sex" style="width: 400px;height:400px;float:left;"></div>
        <div id="map" style="width: 800px;height:400px;"></div>
    </div>
  
    

</template>
<script>
var echarts = require('echarts');
var axios = require('axios');
import '../theme/vintage.js';

   export default{
        data (){
            return {
                msg:"123"
            }
        },
        mounted (){
            var myChart = echarts.init(document.getElementById('main'),'vintage');
            myChart.setOption({
                series : [
                    {
                        name:'用户分布图',
                        type: 'pie',
                        roseType: 'angle',
                        radius: '55%',
                        data:[]
                    }
                ]
            })
             axios.post('http://localhost:3000/users/getall')
            .then(function (response) {
                let num1=0;
                let num2=0;
                let num3=0;   
                let num4=0; 
                let num5=0; 
                let num6=0;             
                const length=response.data.length;
                for(let i=0;i<length;i++){
                    if(response.data[i].city=='shanghai'){
                        num1++;
                    }else if(response.data[i].city=='shenzhen'){
                        num2++;
                    }else if(response.data[i].city=='beijing'){
                        num3++;
                    }else if(response.data[i].city=='hangzhou'){
                        num4++;
                    }else if(response.data[i].city=='guangzhou'){
                        num5++;
                    }else if(response.data[i].city=='hefei'){
                        num6++;
                    }                
                }                
                myChart.setOption({
                    series: [{                                            
                        data: [
                            {value:num1,name:'上海'+num1+'人'},
                            {value:num2,name:'深圳'+num2+'人'},
                            {value:num3,name:'北京'+num3+'人'},
                            {value:num4,name:'杭州'+num4+'人'},
                            {value:num5,name:'广州'+num5+'人'},
                            {value:num6,name:'合肥'+num6+'人'}
                        ]
                    }]
                });
                console.log(num1);
            })
            .catch(function (error) {
                console.log(error);
            }); 


            
            var myChart2 = echarts.init(document.getElementById('sex'),'vintage');

        // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '男女数量图'
                },
                tooltip: {},
                legend: {
                    data:['人数']
                },
                xAxis: {
                    data: ["男","女","其他"]
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: [2, 4, 0,]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option);     
            }


            
    }
</script>
<style lang="scss">
    #charts{
        width:900px;
        .title{
            position:relative;
            top:30px;
            left:35px;
            font-size:20px;
            font-weight:600;
        }
    }
</style>